Animating a sprite image

You’ve likely used sprites when building a website to have one large image containing all the icons or other such images you use across the whole site. For animation, sprites work in a similar way. We collect up each frame of an animation into one image, assign this image as a background to a div, then move that background image to create animation. The steps come into play to define how many stops your background image will make along the way.

Steps divide the animation’s duration into equal parts based on the number of steps you define. Each of these steps is like a still or frame of your animation. Instead of continuous motion, your animation is divided into a series of snapshots.

In our CSS, we start out with a width and height assigned to our div which match the dimensions of a single frame of our animation, and set the background image to the sprite we created.

The total height of our sprite image is 4,000 pixels, and we are using a negative number here so that the image moves upwards. As our sprite image moves up, frames lower in our image will be shown. With the keyframes above, we move the image from its starting 0 0 position up to 0 -4000px.
We can simplify this animation a bit by removing the 0% keyframe. If we don’t specify a starting keyframe (in this case, a 0% keyframe) the styles already applied to our element will be used as a starting point instead. We already set our background image position to 0 0 when we assigned the background image to the .sprite class, so we don’t really need to repeat it here in our keyframes. Our slightly simplified keyframes with our implied first keyframe.

With our animation efficiently defined, we’ll assign it to our .sprite class to get some animation happening. We’ll assign the walker animation to our div with the class of .sprite and give it a duration of one second to start with. (Change this duration if you’d like to see the animation play slower or faster.) We’ll define our animation-timing-function as steps(10) which will divide the duration of our animation into ten steps. Ten is also the number of frames we have in our sprite image, so we’ll see each frame once as the animation plays.

Last, but not least, we’ll set our animation-iteration-count to infinite. The walk cycle this sprite was made from was designed to loop, so we can have our walking character walk forever and ever in this case. The additional properties we’ve added to .sprite look like this:

.sprite { animation: walker 1s steps(10) infinite; }

 

Full css code

.sprite {
    width:245px;
  height:400px;
  display:block;    
  background:transparent url(/walker.png) 0 0 no-repeat;    
 margin:3em auto;
  animation: walker 1s steps(5) infinite;
}


@keyframes walker {
  from {background-position:0 0;}
  to {background-position:0 -4000px;}
}

View Example ..